<template>
    <el-dialog
        title="对账详情"
        :visible.sync="dialogVisible"
        :before-close="closeDialog"
        :close-on-click-modal="false"
        width="90%"
        :append-to-body="true"
        class="accessStatementAccount"
    >
        <el-container
            id="access-reconciliation"
            style="height:100%"
            class="access-reconciliation"
        >
            <el-main>
                <div
                    class="clearfix"
                    style="padding-bottom:20px"
                >
                    <div>
                        <div class="new-flex">
                            <el-form
                                ref="form"
                                :model="searchForm"
                                label-width="100px"
                                inline
                                style="float:right;margin-right:20px"
                            >
                                <el-form-item label="账单状态：">
                                    <el-select
                                        v-model="searchForm.status"
                                        min-width="100"
                                    >
                                        <el-option
                                            v-for="(item, index) in statusList"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="接入时间："
                                >
                                    <el-date-picker
                                        v-model="searchForm.dateRange"
                                        class="my-date-picker"
                                        type="datetimerange"
                                        unlink-panels
                                        popper-class="dateStyle"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        @change="search"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-button
                                        type="primary"
                                        @click="search"
                                    >
                                        查询
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
                <div class="table-wrapper">
                    <div id="accessContent">
                        <el-table
                            :data="accessTableData"
                            stripe
                            tooltip-effect="light"
                            style="width: 100%;overflow:auto;"
                            max-height="500px"
                        >
                            <el-table-column
                                label="序号"
                                type="index"
                            ></el-table-column>

                            <el-table-column
                                label="账单状态"
                                min-width="50"
                                prop="statementStatus"
                                show-overflow-tooltip
                            >
                                <template slot-scope="scope">
                                    <span>{{ StatementTransf(scope.row.statementStatus) }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column
                                label="对账单编号"
                                min-width="50"

                                prop="statementNumber"
                                show-overflow-tooltip
                            >
                            </el-table-column>

                            <el-table-column
                                label="对账时间"
                                min-width="50"

                                prop="statementTime"
                                show-overflow-tooltip
                            >
                            </el-table-column>
                            <el-table-column
                                label="接入时间"
                                min-width="50"

                                prop="accessTime"
                                show-overflow-tooltip
                            >
                            </el-table-column>

                            <el-table-column
                                label="数据条数"
                                min-width="50"

                                prop="dataNumber"
                                show-overflow-tooltip
                            >
                            </el-table-column>
                            <el-table-column
                                label="数据大小"
                                min-width="50"

                                prop="dataSize"
                                show-overflow-tooltip
                            >
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                min-width="50"
                                show-overflow-tooltip
                            >
                                <template slot-scope="scope">
                                    <el-tooltip
                                        class="item"
                                        effect="light"
                                        content="对账单详情"
                                        placement="top"
                                        style="color:#3987EC"
                                    >
                                        <i
                                            v-if="scope.row.statementStatus=='1' || scope.row.statementStatus=='2'"
                                            class="OSS iconwenbenxiangqing enc-icon1"
                                            @click="
                                                viewStatmentDetail(scope.row.statementNumber)
                                            "
                                        ></i>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--  分页  -->
                        <div
                            class="clearfix enc-pagination"
                            style="margin:20px 0"
                        >
                            <el-pagination
                                style="float:right"
                                background
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 50, 100]"
                                :total="accessTableDataTotal"
                                :page-size="pageSize"
                                layout="prev,pager,next,jumper,sizes,total"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
                <listDetail
                    v-if="dialogRec"
                    ref="listDetail"
                />
            </el-main>
        </el-container>
    </el-dialog>
</template>


<script>
import { getTableAccountList } from '@/api/databaseManagement';
import listDetail from '@/views/accessStatementAccount/dialog/listDetail';

export default {
    data() {
        return {
            loading: false,
            searchForm: {
                status: '',
                dateRange: '',
            },
            currentPage: 1,
            pageSize: 10,
            accessTableDataTotal: 1,
            accessTableData: [],
            outerVisible: false,
            dialogVisible: false,
            taskId: 0,
            statusList: [{
                value: '',
                label: '全部',
            }, {
                value: '0',
                label: '未对账',
            }, {
                value: '1',
                label: '对账成功',
            }, {
                value: '2',
                label: '对账失败',
            }, {
                value: '3',
                label: '已销账',
            }],
            dialogRec: false,
        };
    },
    components: {
        listDetail,
    },
    created() {
    },
    methods: {
        openDialogVisible(id) {
            this.dialogVisible = true;
            this.taskId = id;
            this.search();
        },
        search() {
            const searchObj = {
                taskId: this.taskId,
                pageSize: this.pageSize,
                statementStatus: this.searchForm.status,
                pageNum: this.currentPage,
                startTime: this.searchForm.dateRange
                    ? this.searchForm.dateRange[0]
                    : '', // 开始时间
                stopTime: this.searchForm.dateRange
                    ? this.searchForm.dateRange[1]
                    : '', // 结束

            };
            getTableAccountList(searchObj).then((res) => {
                this.loading = false;
                if (res.data.resultCode === 0) {
                    this.accessTableDataTotal = res.data.data.recordTotal;
                    this.accessTableData = res.data.data.data;
                }
            });
        },
        closeDialog() {
            this.accessTableData = [];
            this.taskId = 0;
            this.searchForm = {};
            this.dialogVisible = false;
        },
        // 页面跳转
        handleCurrentChange(val) {
            this.currentPage = val;
            this.search();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.search();
        },
        calcTableRowIndex(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1;
        },
        viewStatmentDetail(val) {
            this.dialogRec = true;
            setTimeout(()=>{this.$refs.listDetail.openDialogVisible({statementNumber: val }) }, 100);
        },
        StatementTransf(status) {
            return this.statusList.find((e) => e.value === status).label;
        },
    },
    filters: {

    },
};
</script>

<style lang="scss">
.accessStatementAccount {
  .el-dialog__header{
    line-height: 0;
    padding: 20px 30px 10px;
    // @include bg-color();
    // transition: background-color .3s;
    .el-dialog__title{
        // @include font-color();
        color: #0090FF;
        font-size: 20px;
    }
    .el-dialog__headerbtn{
        font-size: .3rem;
    }
}
}

</style>
